<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>杨振的个人主页</title>
    <!--四维持-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="swiper-4.5.0/dist/css/swiper.min.css">
    <!--抱死吹铺-->
    <link rel="stylesheet" href="css-字体图标/font-awesome.min.css">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <!--引入-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<div class="header">
   <div class="container">
       <nav class="navbar navbar-expand-lg navbar-light ">
           <a class="navbar-brand col-md-8 col-6" href="#" style="color: #ffffff;">YANG振</a>
           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
               <span class="navbar-toggler-icon"></span>
           </button>
           <div class="collapse navbar-collapse" id="navbarNavDropdown">
               <ul class="navbar-nav">
                   <li class="nav-item active">
                       <a class="nav-link" href="#one">关于我<span class="sr-only">(current)</span></a>
                   </li>
                   <li class="nav-item">
                       <a class="nav-link" href="#three">项目经验</a>
                   </li>
                   <li class="nav-item">
                       <a class="nav-link" href="#two">图片</a>
                   </li>

                   <li class="nav-item">
                       <a class="nav-link" href="#four">效果实例</a>
                   </li>
               </ul>
           </div>
       </nav>
   </div>
</div>
<div class="banner">
   <div class="container text-center">
        <h1>YangZhen</h1>
       <p id = "Hotnews"  href=""   target="_blank" style="color:#ffffff;font-weight: bold"></p>
        <p style="font-family: 微软雅黑;color:#ffffff;">夫君子之行，静以修身，俭以养德；非淡泊无以明志，非宁静无以致远。——《诫子书》</p>
       <a href="#yz" class="p1">CONTACT ME</a>
   </div>
</div>
<div class="main">
   <div class="container" id="one">
       <div class="main-1 text-center">
           <h2 >ABOUT ME</h2>
           <p>我的名字叫杨振，一个00后年轻人!一位学习web前端专业的爱笑青年， 一直是谦逊做人，勤学好问，一边学习一边积累，性格开朗，学习代码1年多的时间，不算聪明的我，也是可以
           做出网页的好吗，哈哈。</p>
       </div>
       <div class="main-2">
                <div class="item">
                    <div class="row">
                        <div class="col-md-6">
                            <a href=""><img src="images/san.jpg" alt=""></a>
                        </div>
                        <div class="col-md-6">
                            <h3>技能</h3>
                            <div class="jn-1">
                                <h5>HTML</h5>
                                <div class="one">
                                    <div class="one-1 text-center">
                                        90%
                                    </div>
                                </div>
                            </div>
                            <div class="jn-1">
                                <h5>CSS</h5>
                                <div class="two">
                                    <div class="two-1 text-center">
                                        85%
                                    </div>
                                </div>
                            </div>
                            <div class="jn-1">
                                <h5>Photoshop</h5>
                                <div class="three">
                                    <div class="three-1 text-center">
                                        60%
                                    </div>
                                </div>
                            </div>
                            <div class="jn-1">
                                <h5>js</h5>
                                <div class="four">
                                    <div class="four-1 text-center">
                                        30%
                                    </div>
                                </div>
                            </div>
                            <div class="jn-1">
                                <h5>Bootstrap</h5>
                                <div class="five">
                                    <div class="five-1 text-center">
                                        65%
                                    </div>
                                </div>
                            </div>
                            <div class="dt clearfix">
                                <div class="dt-1">
                                    <span>目前学到的“招数”只有这些，待本天才慢慢学习积累，技能实时更新</span>
                                </div>
                                <div class="dt-2">
                                    <img src="images/dt.jpg" alt="" style="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
   </div>

</div>
<div class="main2" id="three">
    <div class="container">
        <div class="main2-1 text-center">
            <h2 >Web presentation</h2>
            <p>点击查看我制作的网页</p>
        </div>
        <div class="main2-2 text-center">
            <!-- Swiper -->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide rr1">
                        <a href="http://yangzhen117.gitee.io/duitang"  target="view_window">堆糖</a>
                    </div>
                    <div class="swiper-slide rr2">
                        <a href="http://yangzhen117.gitee.io/repute__summer_homework"  target="view_window">repute</a>
                    </div>
                    <div class="swiper-slide rr3">
                        <a href=" http://yangzhen117.gitee.io/man_wei"  target="view_window">漫威</a>
                    </div>
                    <div class="swiper-slide rr4">
                        <a href=" http://yangzhen117.gitee.io/tianya_mingyue_knife"  target="view_window">天涯明月刀</a>
                    </div>
                    <div class="swiper-slide rr5">
                        <a href=" http://yangzhen117.gitee.io/tengxunwang"  target="view_window">腾讯网</a>
                    </div>
                    <div class="swiper-slide rr6">
                        <a href="http://yangzhen117.gitee.io/hengwang"  target="view_window">恒望</a>
                    </div>
                    <div class="swiper-slide rr7">
                        <a href=" http://yangzhen117.gitee.io/themes"  target="view_window">Themes</a>
                    </div>
                    <div class="swiper-slide rr8">
                        <a href="http://yangzhen117.gitee.io/meizu/"  target="view_window">魅族</a>
                    </div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>

        </div>
    </div>
</div>
<div class="main1" id="two">
    <div class="container">
       <div class="main1-1 text-center">
           <h2>Photo</h2>
           <p>ps成果展示</p>
       </div>
        <div class="main1-2 text-center">
            <div class="row">
                <div class="col-md-4 i-1">
                    <div class="item">
                        蒙版练习
                    </div>
                    <div class="item1">
                        <img src="images/mb.jpg" alt="">
                    </div>
                </div>
                <div class="col-md-4 i-1">
                    <div class="item">
                        动物拼接
                    </div>
                    <div class="item1">
                        <img src="images/yx.jpg" alt="">
                    </div>
                </div>
                <div class="col-md-4 i-1">
                    <div class="item">
                        人物调色
                    </div>
                    <div class="item1">
                        <img src="images/st.jpg" alt="">
                    </div>
                </div>
            </div>
            <div class="row row-1">
                <div class="col-md-4 i-1">
                    <div class="item">
                        抠图
                    </div>
                    <div class="item1">
                        <img src="images/kt.jpg" alt="">
                    </div>
                </div>
                <div class="col-md-4 i-1">
                    <div class="item">
                        图标设计
                    </div>
                    <div class="item1">
                        <img src="images/tb_03.gif" alt="">
                    </div>
                </div>
                <div class="col-md-4 i-1">
                    <div class="item">
                        合并图层
                    </div>
                    <div class="item1">
                        <img src="images/hb.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="main3" id="four">
    <div class="container">
       <div class="main3-1 text-center">
           <h1 >Experience</h1>
           <p>课堂小练习，适用于pc端查看</p>
       </div>
        <div id="qii" class="text-center">
            <ul>
                <li class="active">待办事项</li>
                <li>flex练习</li>
                <li>小小翻译</li>
                <li>京东购物车</li>
                <li>布局练习</li>
            </ul>
            <div class="nr">
                <div class="active">
                    <a href="http://yangzhen117.gitee.io/daibanshixiang"  target="view_window"><img src="images/dbss_03.gif" alt=""></a>
                </div>
                <div>
                    <a href="http://yangzhen117.gitee.io/ui___flex"  target="view_window"><img src="images/flex_06.png" alt=""></a>
                </div>
                <div>
                    <a href="http://yangzhen117.gitee.io/online_translation"  target="view_window"><img src="images/xx_03.gif" alt=""></a>
                </div>
                <div>
                    <a href="http://yangzhen117.gitee.io/jingdong_shopping_cart/"  target="view_window"><img src="images/jd_03.gif" alt=""></a>
                </div>
                <div>
                    <a href="http://yangzhen117.gitee.io/monthly_yuekao_1"  target="view_window"><img src="images/wy_03.gif" alt=""></a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="main4" id="yz">
    <div class="container">
        <div class="main4-1 text-center">
            <h1>CONTACT ME</h1>
        </div>
        <div class="main4-2 text-center">
            <div class="row">
                <div class="col-md-4">
                    <img src="images/s-1_03.png" alt="">
                    <p>河北省沧州市海兴县</p>
                </div>
                <div class="col-md-4">
                    <img src="images/s-2_05.png" alt="">
                    <p>183 032 66473</p>
                </div>
                <div class="col-md-4">
                    <img src="images/s-3_07.png" alt="">
                    <p>299 533 9057@qq.com</p>
                </div>
            </div>
        </div>
        </div>
    </div>
</div>







<script src="swiper-4.5.0/dist/js/swiper.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="script/js.js"></script>
</body>
</html>